<template>
	<view class="uv-content">
		<uv-parse :content="renderedContent" :tagStyle="style"></uv-parse>
	</view>
</template>

<script>
import markdownit from 'markdown-it'
import markdownitAnchor from 'markdown-it-anchor'
import markdownItMermaid from 'markdown-it-mermaid'
import markdownitFootnote from 'markdown-it-footnote'
import markdownitImg from 'markdown-it-imsize'
import markdownitTaskLisk from 'markdown-it-task-lists'
import markdownitAttrs from 'markdown-it-attrs'
import mdDecorate from 'markdown-it-decorate'
import mdExpandTabs from 'markdown-it-expand-tabs'
import mdSup from 'markdown-it-sup'
import mdSub from 'markdown-it-sub'
import mdMark from 'markdown-it-mark'
import mdMultiTable from 'markdown-it-multimd-table'

export default {
	props: {
		source: {
			type: String,
			default: ''
		},
		type: {
			type: String,
			default: 'markdown'
		}
	},
	data() {
		return {
			renderedContent: '',
			style: {
				// 字符串的形式
				blockquote: `text-align: left;
    				line-height: 1.75;
    				font-size: 14px;
    				font-style: initial;
    				padding: 1em 1em 1em 2em;
    				border-radius: 6px;
    				color: rgba(0, 0, 0, 0.6);
    				background: #f7f7f7;
    				margin: 2em 8px;
    				box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    				border: none;`,
				table: `    margin: .5rem 0;
    border-spacing: 0;
    border-radius: 5px;
    border: 1px solid #e0e0e0;
    min-width: 70%;
    display: table;
    border-collapse: separate;
    box-sizing: border-box;
    text-indent: initial;
    unicode-bidi: isolate;`,
				th: `    padding: .75rem;
    border-bottom: 2px solid #9e9e9e;
    color: #757575;
    background-color: #f5f5f5;`,
				td: `    border-bottom: 1px solid #e0e0e0;
    border-right: 1px solid #f5f5f5;
    padding: .75rem;`,
				a: `text-decoration: none !important;
    transition: .2s;
    background: linear-gradient(#07f2, #07f2) no-repeat center bottom/100% 0;`,
				img: ` max-width: 100%;
  height: auto;
  display: block;
  margin: 0.1em auto 0.5em;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);`
			}
		}
	},
	mounted() {
		if (this.type === 'html') {
			this.renderedContent = this.source
			return
		}
		const imageUrl = 'https://wiki.xauat.site/';

		const md = new markdownit({
			html: true,
			breaks: true,
			linkify: true,
			typography: true,
		})

		md.use(markdownItMermaid)
		md.use(markdownitAnchor, {
			permalink: true,
			permalinkBefore: true,
			permalinkSymbol: ''
		})
		md.use(markdownitFootnote)
		md.use(markdownitImg)
		md.use(markdownitTaskLisk, { label: false, labelAfter: false })
		md.use(markdownitAttrs, {
			allowedAttributes: ['id', 'class', 'target']
		})

		md.use(mdDecorate)
			.use(mdExpandTabs)
			.use(mdSup)
			.use(mdSub)
			.use(mdMultiTable, { multiline: true, rowspan: true, headerless: true })
			.use(mdMark)

		md.core.ruler.push('baseurl', (state) => {
			const baseUrl = `${imageUrl}`;

			function rewrite(tokens) {
				for (const token of tokens) {
					if (token.type === 'image') {
						if (!(imageUrl === undefined || imageUrl === '')) {
							for (const attr of token.attrs) {
								if (attr[0] === 'src') {
									attr[1] = baseUrl + attr[1];
								}
							}
						}
						token.attrs.push(['style', 'max-width: 100%;height: auto;object-fit: cover;']);
					}

					if (token.type === 'link_open') {
						token.attrs.push(['class', 'apple-link'])
						token.attrs.push(['target', '_blank'])
					}
					// Process recursively
					if (token.children !== null) {
						rewrite(token.children);
					}
				}
			}

			rewrite(state.tokens);
		});
		let html = md.render(this.source);
		console.log(html);
		html = html.replace(/\<img/gi, '<img style="width:100%;height:auto"');
		this.renderedContent = html
	}
}
</script>

<style scoped>
@import url('../../static/markdown.css');
</style>